<template>
	<view class="postingDetails_box box">
		<view class="account_container">
			<view class="account_conatiner_top_bar">
				<view class="" style="margin-right: 20rpx;" @click="goback">
					<image src="../../static/back.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
				</view>
				<view class="">
					发布详情
				</view>
			</view>
			<view class="postingDetails_container_text">
				<textarea name="" id="" cols="30" rows="10" v-model="desc" placeholder="说说此刻的想法～"></textarea>
			</view>
			<view class="postingDetails_container_component">
				<view class="postingDetails_container_img">
					<u-upload :fileList="fileList1" @afterRead="afterRead" name="1" multiple :maxCount="9"
						style="width: 100%;height: 100%;">
						<!-- 	<image src="../../static/img.png" mode="" style="width: 48rpx; height: 48rpx;"></image>
						<text>添加照片</text> -->
					</u-upload>
				</view>
				<view class="postingDetails_container_video">
					<!-- <u-upload :fileList="fileList1" @afterRead="afterReadVideo" name="1" :maxCount="1"
						style="width: 100%;height: 100%;" accept="video">
						
					</u-upload> -->
				</view>
			</view>
			<view class="location">
				<image src="../../static/postion.png" mode="" style="width: 24rpx ; height: 24rpx;margin-right: 6rpx;">
				</image>
				<text>所在位置</text>
			</view>
			<view class="address_items">
				<view class="address_item" v-for="(item,index) in nearbyAddress">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="btn" @click="releasePosting">
			立即发布
		</view>
	</view>
</template>

<script>
	import {
		getLocationInfo
	} from "../../utils/location.js"
	import {
		publishUpdates
	} from "../../api/request.js"
	export default {
		data() {
			return {
				desc: "",
				activeId: null,
				fileList1: [],
				token: null,
				imgs: [],
				lati: null,
				longi: null,
				cityCode: null,
				province: null,
				city: null,
				district: null,
				street: null,
				addrDetail: null,
				addrName: null,
				nearbyAddress: []
			};
		},
		onLoad(e) {
			const that = this
			console.log(e);
			this.activeId = e.id
			uni.getStorage({
				key: "token",
				success(res) {
					that.token = res.data
				}
			})
			this.getLocationInfoMethod()
		},
		methods: {
			async releasePosting() {
				console.log(this.activeId, this.desc, this.lati, this.longi, this.cityCode, this.province, this.city,
					this.district, this.street, this.addrDetail, this.addrName, this.imgs);
				let res = await publishUpdates({
					activityId: this.activeId,
					desc: this.desc,
					lati: this.lati,
					longi: this.longi,
					cityCode: this.cityCode,
					province: this.province,
					city: this.city,
					district: this.district,
					street: this.street,
					addrDetail: this.addrDetail,
					addrName: this.addrName,
					imgs: this.imgs
				})
				uni.showToast({
					title: "发布成功！"
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},

			async afterReadVideo(event) {
				console.log(event);
				const result = await this.uploadFilePromise(lists[i].url)
				console.log(result);
			},
			// 新增图片
			async afterRead(event) {
				console.log(event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result, 'result');
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
					console.log(fileListLen, this[`fileList${event.name}`]);
				}
			},
			uploadFilePromise(url) {
				const that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://test.hdb168.com/activity/act/upload',
						filePath: url,
						name: 'file',
						header: {
							'Content-Type': 'multipart/form-data',
							'Authorization': 'Bearer:' + that.token
						},
						success: (uploadRes) => {
							console.log(uploadRes, 'uploadRes', JSON.parse(uploadRes.data).data);
							if (uploadRes.statusCode === 200) {
								resolve(uploadRes.data);

								that.imgs.push(JSON.parse(uploadRes.data).data)
							} else {
								reject(new Error('上传失败'));
							}
						},
						fail: (err) => {
							reject(err);
						}
					});
				})
			},
			getLocationInfoMethod() {
				const that = this
				uni.getLocation({
					success(res) {
						const {
							longitude,
							latitude
						} = res
						getLocationInfo(longitude, latitude).then(result => {
								console.log("返回的数据：", result);
								const {
									township,
									adcode,
									city,
									country,
									district,
									province,
									formatted_address,
									businessAreas
								} = result.regeocode.addressComponent
								const {
									location,
									street
								} = result.regeocode.addressComponent.streetNumber
								console.log(location, 'location');
								that.lati = location.split(',')[1]
								that.longi = location.split(',')[0]
								that.cityCode = adcode
								that.province = province
								that.city = city
								that.district = district
								that.street = township
								that.addrDetail = formatted_address
								businessAreas.map((item) => {
									that.nearbyAddress.push({
										name: item.name,
										location: item.location,
										id: item.id
									})
								})
								// that.addrName =
								console.log(res, 'djkhfdjksfh', result);
								// 在这里处理返回的数据
							})
							.catch(error => {
								console.error('发生错误：', error);
							});
						return

					}
				})
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.u-upload__deletable {
		display: none !important;
	}

	.btn {
		position: fixed;
		bottom: 80rpx;
		width: 90%;
		left: 0;
		right: 0;
		margin: auto;
		height: 88rpx;
		line-height: 80rpx;
		background: conic-gradient(from 90deg at 50% 0%, #F09583 0%, #F9301C 100%);
		border-radius: 16rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		font-style: normal;
		text-align: center;
	}

	.location {
		margin-top: 56rpx;
	}

	.address_items {
		display: flex;

		.address_item {
			width: 168rpx;
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #EDEDED;
			text-align: center;
			line-height: 52rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #B4B4B4;
			font-style: normal;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}
	}

	.uni-file-picker {
		position: absolute;
		// z-index: 10000;

		view,
		button {
			width: 196rpx !important;
			height: 196rpx !important;
			background-color: transparent;
			color: transparent;
		}

		button:active {
			background: transparent;
		}

		button:focus {
			background: transparent;
		}
	}

	.postingDetails_container_text {
		margin-top: 42rpx;
	}

	.account_container {
		width: 90%;
		margin: auto;
		margin-top: 88rpx;

		.account_conatiner_top_bar {
			margin-bottom: 20rpx;
			display: flex;
		}
	}

	.postingDetails_container_component {
		margin: auto;
		height: 196rpx;
		display: flex;

		// .postingDetails_container_img {

		// }

		// .postingDetails_container_img,
		// .postingDetails_container_video {
		// 	position: relative;
		// 	width: 196rpx;
		// 	height: 196rpx;
		// 	background: #F4F4F4;
		// 	border-radius: 16rpx;
		// 	text-align: center;
		// 	margin-right: 24rpx;
		// 	display: flex;
		// 	flex-direction: column;
		// 	align-items: center;

		// 	view {
		// 		width: 100%;
		// 		height: 100%;
		// 	}

		// 	image {
		// 		position: absolute;
		// 		top: 58rpx;
		// 		left: 0;
		// 		right: 0;
		// 		margin: auto;
		// 	}

		// 	text {
		// 		position: absolute;
		// 		bottom: 44rpx;
		// 		font-family: PingFangSC, PingFang SC;
		// 		font-weight: 400;
		// 		font-size: 24rpx;
		// 		color: #B4B4B4;
		// 		line-height: 34rpx;
		// 		text-align: center;
		// 		font-style: normal;
		// 		margin: auto;
		// 		left: 0;
		// 		right: 0;
		// 	}
		// }
	}
</style>